<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="有了这个，就不用到处去找重复的了">
  <meta name="keyword" content="hexo, vuejs">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      杂记
    
  </title>
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdn.bootcss.com/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/plugins/gitment.css">
<link rel="stylesheet" href="/css/plugins/search.css">
  <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdn.bootcss.com/nprogress/0.2.0/nprogress.min.js"></script>
  <script src="/js/qrious.js"></script>
<script src="/js/gitment.js"></script>
<script src="/js/search.js"></script>
</head>
  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>杂记</span>
    </a>
    <ul class="right-list">
        <li class="list-item">   
          <span class="algolia-autocomplete algolia-autocomplete-right" style="position: relative; display: inline-block; direction: ltr;">
            <input type="text" id="local-search-input" class="search-query st-default-search-input aa-input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">
          </span>
        </li>
      
        <li class="list-item">
          
            <a href="/" class="item-link active">Home</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">Tags</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">Archives</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/project/" class="item-link">Projects</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">About</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div id="menu-mask" class="menu-mask">
      <ul class="menu-list">
        <li class="menu-item">   
          <span class="algolia-autocomplete algolia-autocomplete-right" style="position: relative; display: inline-block; direction: ltr;">
            <input type="text" id="mobile-search-input" class="search-query st-default-search-input aa-input" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-owns="algolia-autocomplete-listbox-0" dir="auto" style="position: relative; vertical-align: top;">
          </span>
        </li>
        
          <li class="menu-item">
            
              <a href="/" class="menu-link mobile-active">Home</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">Tags</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">Archives</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/project/" class="menu-link">Projects</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">About</a>
            
          </li>
        
      </ul>
    </div>
  </div>
<div class="ins-search">
    <div class="ins-search-mask"></div>
    <div class="ins-search-container">
        <div class="ins-input-wrapper">
            <input type="text" class="ins-search-input" placeholder="输入关键词" />
            <span class="ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '博文',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '未定义',
        },
        ROOT_URL: '/',
        CONTENT_URL: '/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>
<script src="/js/insight.js"></script>

<div id="result-wrap" class="ins-search">
    <div id="local-search-result"></div>
</div>

<script type="text/javascript">      
     var search_path = "search.xml";
     if (search_path.length == 0) {
      search_path = "search.xml";
     }
     var path = "/" + search_path;
     searchFunc(path, 'local-search-input', 'local-search-result');
     searchFunc(path, 'mobile-search-input', 'local-search-result');
</script>
</header>

    <main class="app-body">
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/30/vedio-test/">vedio test</a>
      </h2>
      <p class="article-date">August 30, 2017</p>
      
        
  <a href="/tags#test" >
    <span class="tag-code">test</span>
  </a>

      
      <div class="article-summary">
        
                                  Your user agent does not support the HTML5 Video element.

        
      </div>
      <a class="more" href="/2017/08/30/vedio-test/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/30/给-Hexo-添加带滚动监听的文章目录/">(转)给 Hexo 添加带滚动监听的文章目录</a>
      </h2>
      <p class="article-date">August 30, 2017</p>
      
        
  <a href="/tags#jQuery" >
    <span class="tag-code">jQuery</span>
  </a>

  <a href="/tags#JavaScript" >
    <span class="tag-code">JavaScript</span>
  </a>

      
      <div class="article-summary">
        
           Hexo 是支持文章目录的，这篇文章就对如何添加目录进行了介绍。
大概几周之前，我把文章目录添加到了博客样式中，随后又添加了滚动监听。最近看面试题的时候，发现原来还可以消除抖动，又涨了见识，并且运用到自己的博客中。
添加 Hexo toc 模块看了 Hexo 的官网教程，发现原来 toc  ...
        
      </div>
      <a class="more" href="/2017/08/30/给-Hexo-添加带滚动监听的文章目录/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/30/stylus预处理入门(一)——选择器/">stylus预处理入门(一)——选择器</a>
      </h2>
      <p class="article-date">August 30, 2017</p>
      
        
  <a href="/tags#stylus" >
    <span class="tag-code">stylus</span>
  </a>

  <a href="/tags#css" >
    <span class="tag-code">css</span>
  </a>

      
      <div class="article-summary">
        
          相关网站
官网：stylus
中文文档：stylus中文版参考文档 by 张鑫旭
理解css预处理器：css预处理器初识 by 栓萝卜的棍子
三种css预处理器语言详解：less|sass|stylus by 开源中国


CSS预处理器语言的个人理解
用另外一种可读性高、语法性强的语言来写 ...
        
      </div>
      <a class="more" href="/2017/08/30/stylus预处理入门(一)——选择器/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/30/stylus入门使用方法/">stylus入门使用方法</a>
      </h2>
      <p class="article-date">August 30, 2017</p>
      
        
  <a href="/tags#stylus" >
    <span class="tag-code">stylus</span>
  </a>

  <a href="/tags#css" >
    <span class="tag-code">css</span>
  </a>

      
      <div class="article-summary">
        
          stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。
Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus ...
        
      </div>
      <a class="more" href="/2017/08/30/stylus入门使用方法/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/30/自定义HEXO站内搜索Javascript-json/">自定义HEXO站内搜索Javascript+json</a>
      </h2>
      <p class="article-date">August 30, 2017</p>
      
        
  <a href="/tags#hexo" >
    <span class="tag-code">hexo</span>
  </a>

      
      <div class="article-summary">
        
          开始之前目前很多Hexo博客都用的Swiftype和Algolia等第三方搜索服务。其实针对无数据库的情况下，Hexo本身也提供了两个插件来生成数据文件作为数据源：hexo-generator-search生成xml格式的数据文件。hexo-generator-json-content 生成 ...
        
      </div>
      <a class="more" href="/2017/08/30/自定义HEXO站内搜索Javascript-json/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/30/介绍如何为-hexo-写一个本地的搜索引擎/">（转）介绍如何为 hexo 写一个本地的搜索引擎</a>
      </h2>
      <p class="article-date">August 30, 2017</p>
      
        
  <a href="/tags#hexo" >
    <span class="tag-code">hexo</span>
  </a>

      
      <div class="article-summary">
        
          早在我最初从 Ruhoh 迁移博客到 Hexo 时，我就有动手写一个本地的搜索引擎的想法。比起使用第三方服务的站内搜索，本地搜索引擎有几个好处：

更可靠。不用担心由于某些显而易见的原因导致第三方服务不可访问。
速度更快。不管是 Google 还是 Swiftype ，第三方搜索服务的加载速 ...
        
      </div>
      <a class="more" href="/2017/08/30/介绍如何为-hexo-写一个本地的搜索引擎/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/30/写一个自己的HEXO主题/">（写一个自己的HEXO主题</a>
      </h2>
      <p class="article-date">August 30, 2017</p>
      
        
  <a href="/tags#hexo" >
    <span class="tag-code">hexo</span>
  </a>

  <a href="/tags#theme" >
    <span class="tag-code">theme</span>
  </a>

      
      <div class="article-summary">
        
          最开始折腾Hexo的时候感觉这东西很神奇，通过他和github搭配就能生成免费的静态博客，而且还有丰富的主题可以选择，当我刚入Hexo的时候默认主题是landscape，后来又使用过NexT，是一款很漂亮的主题，但是除此之外，还有很多好看的主题，我很好奇这些主题都是怎么写出来的，于是乎就仿照 ...
        
      </div>
      <a class="more" href="/2017/08/30/写一个自己的HEXO主题/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/30/jQuery选择器总结/">jQuery选择器总结</a>
      </h2>
      <p class="article-date">August 30, 2017</p>
      
        
  <a href="/tags#jQuery" >
    <span class="tag-code">jQuery</span>
  </a>

      
      <div class="article-summary">
        
          jQuery 的选择器可谓之强大无比，这里简单地总结一下常用的元素查找方法 
各种选择方式$(“#myELement”)    选择id值等于myElement的元素，id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元素$(“div”)           选择所 ...
        
      </div>
      <a class="more" href="/2017/08/30/jQuery选择器总结/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/28/Flex-布局教程：语法篇/">Flex 布局教程：语法篇</a>
      </h2>
      <p class="article-date">August 28, 2017</p>
      
        
  <a href="/tags#css" >
    <span class="tag-code">css</span>
  </a>

  <a href="/tags#flex" >
    <span class="tag-code">flex</span>
  </a>

      
      <div class="article-summary">
        
          网页布局（layout）是 CSS 的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便 ...
        
      </div>
      <a class="more" href="/2017/08/28/Flex-布局教程：语法篇/">Read more</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/2017/08/25/CSS padding margin border属性详解/">CSS padding margin border属性详解</a>
      </h2>
      <p class="article-date">August 25, 2017</p>
      
        
  <a href="/tags#css" >
    <span class="tag-code">css</span>
  </a>

      
      <div class="article-summary">
        
          图解CSS padding、margin、border属性W3C组织建议把所有网页上的对像都放在一个盒(box)中，设计师可以通过创建定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、内边距(padding)、边框(border ...
        
      </div>
      <a class="more" href="/2017/08/25/CSS padding margin border属性详解/">Read more</a>
    </article>
  

  
    <div id="page-nav">
        <span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><a class="page-number" href="/page/3/">3</a><a class="extend next" rel="next" href="/page/2/">下页 &#187;</a>
</div>
  
</main>


    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
  <p class="copyright">
    &copy; 2017 | Proudly powered by <a href="https://hexo.io" target="_blank">Hexo</a>
    <br>
    Theme by <a href="https://github.com/yanm1ng">yanm1ng</a> | Mod by <a href="https://github.com/ycg31">ycg31</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine == 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>
<!-- Baidu Tongji -->

<script src="/js/script.js"></script>
  </body>
</html>